// import React, { useEffect, useRef } from 'react';
// import ProTable from '@ant-design/pro-table';
// import type { ActionType, ProColumns } from '@ant-design/pro-table';
// import { DownloadOutlined } from '@ant-design/icons';
// import { Tooltip, Button, Space, Input } from 'antd';
// // import './index.less';

// const AuthCheck: React.FC<TableListItem> = (props) => {
//   const actionRef = useRef<ActionType>();

//   useEffect(() => {}, []);

//   /**
//    * 定义行信息
//    */
//   const columns: ProColumns<TableListItem>[] = [
//     {
//       title: '序号',
//       dataIndex: 'index',
//       valueType: 'index',
//       align: 'left',
//       render: (text, rocord, index) => index + 1,
//     },
//     {
//       title: '系统名称',
//       dataIndex: 'appName1',
//       hideInTable: false,
//       align: 'left',
//     },
//     {
//       title: '所属省份',
//       dataIndex: 'appName2',
//       hideInTable: true,
//       align: 'left',
//     },
//     {
//       title: '员工账号',
//       dataIndex: 'appName3',
//       hideInSearch: false,
//       align: 'left',
//     },
//     {
//       title: '员工姓名',
//       dataIndex: 'appName4',
//       hideInSearch: false,
//       align: 'left',
//     },
//     {
//       title: '员工号',
//       dataIndex: 'appName5',
//       hideInSearch: true,
//       align: 'left',
//     },
//     {
//       title: '账号活跃程度',
//       dataIndex: 'appName6',
//       hideInSearch: true,
//       align: 'left',
//     },
//     {
//       title: '所属公司(省份、地市)',
//       dataIndex: 'appCode',
//       hideInSearch: true,
//       align: 'left',
//     },
//     {
//       title: '所属处室',
//       dataIndex: 'module',
//       hideInSearch: true,
//       align: 'left',
//     },
//     {
//       title: '权限名称',
//       dataIndex: 'appUrl',
//       hideInSearch: true,
//       render: (dom, record) => {
//         return <Tooltip title={record?.aesKey}>******</Tooltip>;
//       },
//       align: 'left',
//     },
//   ];

//   return (
//     <ProTable<TableListItem>
//       actionRef={actionRef}
//       columns={columns}
//       search={{
//         labelWidth: 'auto',
//         span: 6,
//         optionRender: (searchConfig, formProps, dom) => [dom[1], dom[0]],
//       }}
//       headerTitle={
//         <Space>
//           {
//             <Button
//               value="create"
//               type="primary"
//               danger
//               icon={<DownloadOutlined />}
//             >
//               导出
//             </Button>
//           }
//         </Space>
//       }
//     />
//   );
// };

// export default AuthCheck;

import React, { useState, useEffect, useRef } from 'react';
import {
  Button,
  Form,
  Input,
  Table,
  Row,
  Col,
  Tooltip,
  Select,
  Cascader,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { SelectProps } from 'antd';
import './index.less';

interface Option {
  value: string;
  label: string;
  children?: Option[];
  isLeaf?: boolean;
  loading?: boolean;
}

const optionLists: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  },
];

const AuthCheck: React.FC<TableListItem> = (props) => {
  const [form] = Form.useForm();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [options, setOptions] = useState<Option[]>(optionLists);

  const options1: SelectProps['options'] = [];
  for (let i = 10; i < 36; i++) {
    options1.push({
      label: i.toString(36) + i,
      value: i.toString(36) + i,
    });
  }

  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const btnClick = () => {
    console.log('selectedRowKeys', selectedRowKeys);
    console.log('selectedRows', selectedRows);
  };

  interface TableSource {
    appName1: 'string';
    appName2: 'string';
    appName3: 'string';
    appName4: 'string';
    appName5: 'string';
    appCode: 'string';
    module: 'string';
    appUrl: 'string';
  }

  const columns: ColumnsType<TableSource> = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'left',
      render: (text, rocord, index) => index + 1,
    },
    {
      title: '系统名称',
      dataIndex: 'appName1',
      align: 'left',
    },
    {
      title: '员工姓名',
      dataIndex: 'appName2',
      align: 'left',
    },
    {
      title: '员工账号',
      dataIndex: 'appName3',
      align: 'left',
    },
    {
      title: '员工号',
      dataIndex: 'appName4',
      align: 'left',
    },
    {
      title: '账号活跃程度',
      dataIndex: 'appName5',
      align: 'left',
    },
    {
      title: '所属公司(省/地市)',
      dataIndex: 'appCode',
      align: 'left',
    },
    {
      title: '所属处室',
      dataIndex: 'module',
      align: 'left',
    },
    {
      title: '权限名称',
      dataIndex: 'appUrl',
      render: (dom, record) => {
        return <Tooltip title={record?.aesKey}>******</Tooltip>;
      },
      align: 'left',
    },
  ];

  const dataSource: TableSource[] = [
    {
      key: '1',
      appName1: '合作方门户',
      appName2: '刘思怡',
      appName3: 'liusiyi',
      appName4: '001',
      appName5: '活跃',
      appCode: '北京',
      module: 'xxx处室',
      appUrl: '北京市供应商',
    },
    {
      key: '2',
      appName1: '合作方门户',
      appName2: '赵小雷',
      appName3: 'zhaoxiaolei',
      appName4: '002',
      appName5: '不活跃',
      appCode: '天津',
      module: 'xxx处室',
      appUrl: '天津市供应商',
    },
  ];

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      setSelectedRows(selectedRows);
    },
  };

  const onChange = (value: string[], selectedOptions: Option[]) => {
    console.log(value, selectedOptions);
  };

  return (
    <div className="authcheckwrap">
      <div className="formwrapper">
        <Form
          form={form}
          name="control-hooks"
          onFinish={onFinish}
          colon={false}
          style={{
            display: 'flex',
            // justifyContent: 'space-between',
            // alignItems: 'center',
          }}
        >
          <Row style={{ borderRight: '1px solid rgb(229, 229, 229)' }}>
            <Col span={8}>
              <Form.Item name="系统名称" label="系统名称">
                <Select
                  mode="multiple"
                  // allowClear
                  // style={{ width: '230px' }}
                  placeholder="请输入"
                  showArrow={true}
                  showSearch={false}
                  allowClear={false}
                  defaultValue={['a10', 'c12']}
                  onChange={handleChange}
                  options={options1}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="所属省份" label="所属省份">
                <Cascader
                  options={options}
                  onChange={onChange}
                  changeOnSelect
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="员工账号" label="员工账号">
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="员工姓名"
                label="员工姓名"
                style={{ marginBottom: '0px' }}
              >
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
          </Row>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              marginLeft: '20px',
            }}
          >
            <Button
              type="primary"
              htmlType="submit"
              className="searchBtn"
              style={{ marginBottom: '20px' }}
            >
              查询
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </div>
        </Form>
      </div>
      <Button onClick={btnClick} className="exportBtn">
        导出
      </Button>
      <Table
        columns={columns}
        dataSource={dataSource}
        rowSelection={rowSelection}
        pagination={{
          total: 30,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          onChange: (page, pageSize) => {
            console.log('page', page), console.log('pageSize', pageSize);
          },
        }}
      ></Table>
    </div>
  );
};

export default AuthCheck;
